<template>
    <div class="pic">
        <h2>1970年至今管理员和街道负责人不完全统计：</h2>
        <div id="myChart" :style="{ width: '1200px', height: '400px' }"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    mounted() {
        this.imgpic()

    },

    methods: {
        imgpic() {
            var app = {};

            var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            var option;

            const posList = [
                'left',
                'right',
                'top',
                'bottom',
                'inside',
                'insideTop',
                'insideLeft',
                'insideRight',
                'insideBottom',
                'insideTopLeft',
                'insideTopRight',
                'insideBottomLeft',
                'insideBottomRight'
            ];
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: posList.reduce(function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };
            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    const labelOption = {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    };
                    myChart.setOption({
                        series: [
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            }
                        ]
                    });
                }
            };
            const labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {}
                }
            };
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['管理员', '街道负责人', '是否有效期', '需要完善信息']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['1970-1989', '1990-2000', '2001-2010', '2011-2020', '2021-至今']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '管理员',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        // data: [320, 332, 301, 334, 390]
                        data: [
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300)
                        ]
                    },
                    {
                        name: '街道负责人',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        // data: [220, 182, 191, 234, 290]
                        data: [
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300)
                        ]
                    },
                    {
                        name: '是否有效期',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300)
                        ]
                    },
                    {
                        name: '需要完善信息',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300),
                            Math.floor(Math.random() * 300)
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);

        }
    },
};
</script>

<style lang="less" scoped>
.pic {
    width: 100%;
    height: 420px;
    padding-left: 200px;
    box-sizing: border-box;

    h2 {
        font-family: "fontte";
        // src: url('../../../font/YouraScript-qZ51x-2.ttf');
        src: url('../../../font/三极花朝体.ttf');
        font-weight: 800;
        color: lightslategrey;
    }
}
</style>